<%--
  Created by IntelliJ IDEA.
  User: zhangkeke
  Date: 2022/10/9
  Time: 14:41
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<html>
<head>
    <title>Title</title>
<script src="${pageContext.request.contextPath}/jcript/jquery-1.7.2.js"></script>
    <script>
        $(function (){
            $("#sp3").css({"color":"red","font-size":"1px"});
            $("#inp1").blur(function (){
                var number = $("#inp1").val();
                var reg = /^1[\d]{10}$/;
                if(reg.test(number)){
                    $("#inp1").css("border","green");
                }else {
                    $("#sp1").css("color","red")
                    $("#sp1").text("请输入正确手机号")
                }
            })
            $("#inp2").blur(function (){
                var pwd = $("#inp2").val();
                var reg1 = /^(?![0-9]+$)(?![a-z]+$)(?![A-Z]+$)(?!([^(0-9a-zA-Z)]|[\(\)])+$)([^(0-9a-zA-Z)]|[\(\)]|[a-z]|[A-Z]|[0-9]){6,18}$/
                if(!reg1.test(pwd)){
                    $("#sp2").css("color","red")
                    $("#sp2").text("密码应是6-18位含字母，数字，符号其中两种")
                }
            })
            $("#inp2").focus(function (){
                $("#sp2").text("")
            })
            $("#inp1").focus(function (){
                $("#sp1").text("")
            })
            //不可以直接写if表达式，可以定义一个dom功能，然后在这个功能里面判断，还有就是可以使用脚本语言
            $("#inp3").blur(function (){
                var p1 = $("#inp3").val()
                var p2 = $("#inp2").val()
                if(p2 != p1){
                    $("#sp4").text("您两次输入的密码不一致")
                    $("#sp4").css("color","red")
                    $("#btn").css("disabled","true")
                }
            })
            $("#inp3").focus(function (){
                $("#sp4").text("")
            })

        })
    </script>
</head>
<body>
<div style="position: relative;left: 550px;top: 150px">
    <h3>欢迎您来到艾融银行注册页面</h3>
    <form action="/check" method="post">
        手机号<input id="inp1" placeholder="请输入您的手机号" name="telephone"> <span id="sp1"></span><br>
        密码 <input type="password" id="inp2" placeholder="请输入您的密码" name="password">   <span id="sp2"></span><br>
        <span  id="sp3" style="color: red;font-size: 3px">提示：密码6-18位，数字、字母、符号中至少任意两种组合</span>
        <br>
        确认密码<input type="password" id="inp3" placeholder="请再次输入密码" name="pwd2"><span id="sp4"></span><br>
        <button id="btn">确认注册</button>
    </form>

</div>

</body>
</html>
